<template>
  <div ref="mask" class="mask" v-if="show">
    <section ref="phoneModule" class="login login-phone anim-scale-show" v-show="step1">
      <h6>绑定手机号</h6>
      <i class="iconfont close icon-close2" v-on:click="closeMask"></i>
      <div class="input-con hairlines-bottom">
        <input ref="phone" class="input-phone" type="number" placeholder="  请输入手机号码" v-on:input="checkPhone">
        <label></label>
        <i ref="clean" class="iconfont clean icon-close" v-on:click="cleanValue"></i>
      </div>
      <div class="bt-con">
        <input ref="phoneNext" disabled="disabled" class="radiu-fullW-s-bt" type="button" value="下一步" v-on:click="phoneNext">
      </div>
    </section>
    <section ref="codeModule" class="login login-code" v-show="!step1">
      <h6>输入验证码</h6>
      <i class="iconfont back icon-return" v-on:click="codeBack"></i>
      <i class="iconfont close icon-close2" v-on:click="closeMask"></i>
      <div class="phone-show">
        <span>{{phone.part1}}</span>
        <span>{{phone.part2}}</span>
        <span>{{phone.part3}}</span>
        <input ref="codeCutdown" disabled="disabled" type="button" v-on:click="sendCode">
      </div>
      <div class="code-con hairlines-bottom">
        <input ref="inputCode" type="tel" v-on:input="verifyCode">
      </div>
    </section>
  </div>
  <div v-else></div>
</template>
<script>
  import $ from 'edom'
  export default {
    name: 'bind',
    props: ['show'],
    data () {
      return {
        step1: true,
        time: 60,
        phone: {
          value: '',
          part1: '',
          part2: '',
          part3: ''
        },
        code: 1234,
        codeEle: null
      }
    },
    methods: {
      checkPhone: function (event) {
        let refs = this.$refs
        let phone = refs.phone
        let nextBt = refs.phoneNext
        let cleanBt = refs.clean
        let value = phone.value
        let length = value.length
        if (phone.classList.contains('warn') && length < 11) {
          phone.classList.remove('warn')
        }
        if (length > 0) {
          cleanBt.style.display = 'block'
        }
        if (length > 11) {
          phone.value = value.substring(0, 11)
        } else if (length === 11) {
          if ($().checkPhone(value)) {
            nextBt.removeAttribute('disabled')
            this.phone.value = value
          } else {
            $().Mnews('请检查手机号码', 1000)
            phone.classList.add('warn')
          }
        } else {
          nextBt.setAttribute('disabled', 'disabled')
        }
      },
      phoneNext: function () {
        let phone = this.phone.value
        this.phone.part1 = phone.substring(0, 3)
        this.phone.part2 = phone.substring(3, 7)
        this.phone.part3 = phone.substring(7, 11)
        this.step1 = false
        this.sendCode()
      },
      codeBack: function () {
        this.step1 = true
      },
      verifyCode: function () {
        let codeEle = this.$refs.inputCode
        let value = codeEle.value
        if (value.length === 4) {
          this.axios.post('/api/login/bind_mobile', {
            mobile: this.phone.value,
            code: value,
            user_id: this.$store.state.user_id,
            token: this.$store.state.token
          })
          .then((res) => {
            let data = res.data
            if (data.code === 200) {
              this.$store.commit('bindPhone')
              this.closeMask()
            } else {
              $().Mnews(data.desc, 1000)
            }
          })
        }
        if (value.length > 4) codeEle.value = value.substring(0, 4)
      },
      sendCode: function () {
        this.axios.post('/api/sms/send_code', {
          mobile: this.phone.value
        })
        .then(() => {
          $().Mnews('短信发送成功', 1000)
          let timer = null
          let time = this.time
          let bt = this.$refs.phoneNext
          let cutdown = this.$refs.codeCutdown
          cutdown.value = time + ' 秒'
          cutdown.setAttribute('disabled', 'disabled')
          bt.setAttribute('disabled', 'disabled')
          timer = setInterval(function () {
            time--
            if (time === 0) {
              clearInterval(timer)
              timer = null
              cutdown.value = '重新发送'
              bt.value = '下一步'
              bt.removeAttribute('disabled')
              cutdown.removeAttribute('disabled')
            } else {
              cutdown.value = time + ' 秒'
              bt.value = time + ' 秒'
            }
          }, 1000)
        })
      },
      cleanValue: function () {
        let refs = this.$refs
        let phone = refs.phone
        let nextBt = refs.phoneNext
        let cleanBt = refs.clean
        cleanBt.style.display = 'none'
        phone.value = ''
        nextBt.setAttribute('disabled', 'disabled')
      },
      closeMask: function () {
        this.$refs.phoneModule.classList.add('anim-scale-out')
        this.$refs.codeModule.classList.add('anim-scale-out')
        setTimeout(() => {
          this.$emit('close')
          this.$refs.phoneModule.classList.remove('anim-scale-out')
          this.$refs.codeModule.classList.remove('anim-scale-out')
        }, 200)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .login{
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 rem(24);
    width: 80%;
    background: #fff;
    border-radius: rem(8);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
    h6{
      padding: rem(30) 0;
      font-size: rem(34);
      font-weight: 700;
      letter-spacing: rem(2);
    }
    .close,.back{
      position: absolute;
      top: 0;
      font-size: rem(28);
      color: #666;
    }
    .close{
      right: 0;
      padding-top: rem(40);
      padding-right: rem(30);
    }
    .back{
      left: 0;
      padding-top: rem(37);
      padding-left: rem(30);
      font-size: rem(32);
      color: #000;
    }
  }
  .login-phone{
    .input-con{
      position: relative;
      margin-bottom: rem(50);
      .input-phone{
        display: block;
        padding: rem(20) 0 rem(25) rem(20);
        width: 100%;
        font-size: rem(30);
      }
      label{
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 0;
        height: 2px;
        background: #72a5ef;
        transition: all .4s;
      }
      .input-phone:focus + label{
        width: 100%;
      }
    }
    .bt-con{
      margin-bottom: rem(100);
      input[type=button]:disabled {
        background: #e5e5e5;
        color: #333;
      }
    }
    .clean{
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      color: #999;
      padding-top: rem(20);
      font-size: rem(30);
    }
  }
  .login-code{
    .phone-show{
      margin: rem(30) 0 rem(35) 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        margin-right: rem(10);
        font-size: rem(32);
        color: #999;
      }
      input[type=button]{
        margin-left: rem(5);
        padding: rem(5) rem(15);
        background: #72a5ef;
        border-radius: 2px;
        font-size: rem(24);
        color: #fff;
      }
      input[type=button]:disabled {
        background: #fff;
        color: #999;
        border: 1px solid #999;
        border-radius: 0;
      }
    }
    .code-con{
      margin: 0 auto rem(50) auto;
      width: 60%;
      input{
        display: block;
        padding-bottom: rem(15);
        width: 100%;
        height: rem(60);
        font-size: rem(32);
        color: #333;
        text-align: center;
      }
      .input-code:last-child{
        margin-right: 0;
      }
      .actived{
        border: 1px solid #72a5ef;
      }
    }
  }
</style>

